<template>
  <div>
    <div class="overall-chunk">
      <div class="overall-chunk-header overall-flex">
        <slot name="icon">
          <i v-if="icon" class="chunk-header-icon" :class="[icon]"></i>
        </slot>
        <div class="chunk-header-left" >
          <p>{{ title }}</p>
          <p class="header-tips">
            {{ description }}
          </p>
        </div>
        <slot name="header-right">
          <div class="chunk-header-right"></div>
        </slot>
      </div>
      <div class="overall-chunk-value">
        <slot name="default"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      // 尺寸  可选值：medium正常 / small小 / mini迷你
      type: String,
      default: "small",
    },
    title: {
      // 标题
      type: String,
      default: "标题",
    },
    description: {
      // 辅助性文本
      type: String,
      default: "Support Requests",
    },
    icon: {
      // 是否显示图标
      type: String,
      default: "",
    },
    round: {
      // 图标是否圆形
      type: Boolean,
      default: false,
    },
    padding: {
      type: String,
      default: "0px 20px 10px",
    },
  },
};
</script>

<style scoped>
.chunk-icon {
  font-size: 34px;
  color: gray;
  margin-right: 6px;
}
.chunk-icon-round {
  width: 35px;
  height: 35px;
  display: block;
  background-color: #82939c88;
}

.overall-chunk {
  margin-bottom: 20px;
  box-sizing: border-box;
  background: white;
}
.overall-chunk-header,
.overall-chunk-value {
  padding: 0px 15px;
}
.overall-chunk-header {
  height: 60px;
  box-sizing: border-box;
  font-size: 14px;
  align-items: center;
  gap:15px;
  justify-content: space-between;
}
.chunk-header-left{
  
}
.chunk-header-right{
  height: 100%;
}
.header-tips {
  font-size: 12px;
  margin-top: 3px;
  color: #82939c88;
}

.overall-chunk-value {
  padding: 20px 18px;
  padding-top: 10px;
  box-sizing: border-box;
}
.overall-chunk-value:empty {
  padding: 0px;
}

.value {
  flex: 1;
}
</style>
